<script setup lang="ts">
import { computed, ref } from "vue";
import BottomModal from './components/gengduo.vue';
import Pinglun from './components/pinglun.vue'
const InderSname = ref([
    {
        id: 1,
        imageurl: 'https://gitcode.net/qq_44112897/images/-/raw/master/comic/15.jpg',
        name: "用户昵称",
        ip: '贵州',
        times: "一天前",
        tang1: "#tag1 #tag2",
        tang1_s: "11111111111",
        imageURL: ["/static/images/share-2.png",
            "/static/images/com_icon_message_pressed_3.png",
            "/static/images/thumbs-up.png",
            "/static/images/star.png"
        ],
        fen_s: "分享",
        title_s: 100,
        title1_s: 50,
        title2_s: 90,
        images: [
            'https://gitcode.net/qq_44112897/images/-/raw/master/comic/8.jpg',
            'https://gitcode.net/qq_44112897/images/-/raw/master/comic/1.jpg',
            'https://gitcode.net/qq_44112897/images/-/raw/master/comic/30.jpg',

        ]

    },
    {
        id: 2,
        imageurl: 'https://gitcode.net/qq_44112897/images/-/raw/master/comic/8.jpg',
        name: "用户1",
        ip: '贵州',
        times: "一小时前",
        tang1: "#tag1 #tag2",
        tang1_s: "22222222222222",
        imageURL: ["/static/images/share-2.png",
            "/static/images/com_icon_message_pressed_3.png",
            "/static/images/thumbs-up.png",
            "/static/images/star.png"
        ],
        fen_s: "分享",
        title_s: 120,
        title1_s: 60,
        title2_s: 80,
        images: [
            'https://gitcode.net/qq_44112897/images/-/raw/master/comic/1.jpg',
            'https://gitcode.net/qq_44112897/images/-/raw/master/comic/30.jpg',
            'https://gitcode.net/qq_44112897/images/-/raw/master/comic/8.jpg',

        ]
    },
    {
        id: 3,
        imageurl: 'https://gitcode.net/qq_44112897/images/-/raw/master/comic/1.jpg',
        name: "用户2",
        ip: '北京',
        times: "三天前",
        tang1: "#tag1 #tag2",
        tang1_s: "333333333",
        imageURL: ["/static/images/share-2.png",
            "/static/images/com_icon_message_pressed_3.png",
            "/static/images/thumbs-up.png",
            "/static/images/star.png"
        ],
        fen_s: "分享",
        title_s: 130,
        title1_s: 70,
        title2_s: 40,
        images: [
            'https://gitcode.net/qq_44112897/images/-/raw/master/comic/24.jpg',
            'https://gitcode.net/qq_44112897/images/-/raw/master/comic/30.jpg',
            'https://gitcode.net/qq_44112897/images/-/raw/master/comic/8.jpg',

        ]
    },
    {
        id: 4,
        imageurl: 'https://gitcode.net/qq_44112897/images/-/raw/master/comic/5.jpg',
        name: "用户3",
        ip: '上海',
        times: "两天前",
        tang1: "#tag1 #tag2",
        tang1_s: "4444444444",
        imageURL: ["/static/images/share-2.png",
            "/static/images/com_icon_message_pressed_3.png",
            "/static/images/thumbs-up.png",
            "/static/images/star.png"
        ],
        fen_s: "分享",
        title_s: 90,
        title1_s: 100,
        title2_s: 500,
        images: [

            'https://gitcode.net/qq_44112897/images/-/raw/master/comic/30.jpg',
            'https://gitcode.net/qq_44112897/images/-/raw/master/comic/8.jpg',
            'https://gitcode.net/qq_44112897/images/-/raw/master/comic/24.jpg',

        ]
    },
    {
        id: 5,
        imageurl: 'https://gitcode.net/qq_44112897/images/-/raw/master/comic/30.jpg',
        name: "用户4",
        ip: '四川',
        times: "一天前",
        tang1: "#tag1 #tag2",
        tang1_s: "11111111111",
        imageURL: ["/static/images/share-2.png",
            "/static/images/com_icon_message_pressed_3.png",
            "/static/images/thumbs-up.png",
            "/static/images/star.png"
        ],
        fen_s: "分享",
        title_s: 40,
        title1_s: 50,
        title2_s: 90,
        images: [
            'https://gitcode.net/qq_44112897/images/-/raw/master/comic/8.jpg',
            'https://gitcode.net/qq_44112897/images/-/raw/master/comic/30.jpg',

            'https://gitcode.net/qq_44112897/images/-/raw/master/comic/24.jpg',

        ]

    },
    {
        id: 6,
        imageurl: 'https://gitcode.net/qq_44112897/images/-/raw/master/comic/17.jpg',
        name: "用户5",
        ip: '广西',
        times: "一小时前",
        tang1: "#tag1 #tag2",
        tang1_s: "22222222222222",
        imageURL: ["/static/images/share-2.png",
            "/static/images/com_icon_message_pressed_3.png",
            "/static/images/thumbs-up.png",
            "/static/images/star.png"
        ],
        fen_s: "分享",
        title_s: 170,
        title1_s: 60,
        title2_s: 80,
        images: [
            'https://gitcode.net/qq_44112897/images/-/raw/master/comic/8.jpg',
            'https://gitcode.net/qq_44112897/images/-/raw/master/comic/24.jpg',
            'https://gitcode.net/qq_44112897/images/-/raw/master/comic/30.jpg',


        ]
    },
    {
        id: 7,
        imageurl: 'https://gitcode.net/qq_44112897/images/-/raw/master/comic/24.jpg',
        name: "用户6",
        ip: '江苏',
        times: "五天前",
        tang1: "#tag1 #tag2",
        tang1_s: "333333333",
        imageURL: ["/static/images/share-2.png",
            "/static/images/com_icon_message_pressed_3.png",
            "/static/images/thumbs-up.png",
            "/static/images/star.png"
        ],
        fen_s: "分享",
        title_s: 130,
        title1_s: 70,
        title2_s: 40,
        images: [
            'https://gitcode.net/qq_44112897/images/-/raw/master/comic/8.jpg',
            'https://gitcode.net/qq_44112897/images/-/raw/master/comic/24.jpg',
            'https://gitcode.net/qq_44112897/images/-/raw/master/comic/5.jpg',


        ]
    },
    {
        id: 8,
        imageurl: 'https://gitcode.net/qq_44112897/images/-/raw/master/comic/5.jpg',
        name: "用户7",
        ip: '上海',
        times: "两天前",
        tang1: "#tag1 #tag2",
        tang1_s: "4444444444",
        imageURL: ["/static/images/share-2.png",
            "/static/images/com_icon_message_pressed_3.png",
            "/static/images/thumbs-up.png",
            "/static/images/star.png"
        ],
        fen_s: "分享",
        title_s: 90,
        title1_s: 100,
        title2_s: 500,
        images: [
            'https://gitcode.net/qq_44112897/images/-/raw/master/comic/8.jpg',
            'https://gitcode.net/qq_44112897/images/-/raw/master/comic/5.jpg',
            'https://gitcode.net/qq_44112897/images/-/raw/master/comic/24.jpg',


        ]
    },

])
// 随机分配
const shuffleData = () => {
    const data = InderSname.value;
    for (let i = data.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [data[i], data[j]] = [data[j], data[i]];
    }
    InderSname.value = data;
};
// 刷新页面
const isTriggered = ref(false)
const onRefresh = async () => {
    isTriggered.value = true
    await Promise.all([
        InderSname
    ])
    shuffleData(); // 在这里进行数据随机调换
    setTimeout(() => {
        console.log("刷新成功");
        isTriggered.value = false;
    }, 500);
}
const isFollowed = ref(true)
const followText = computed(() => isFollowed.value ? '已关注' : '关注')
const buttonType = computed(() => isFollowed.value ? 'info' : 'primary')
const toggleFollow = () => {
    isFollowed.value = !isFollowed.value
    console.log(isFollowed.value);
}
const showModal = ref(false)
const showPing = ref(false)
</script>

<template>
    <!-- <scroll-view scroll-y refresher-enabled @refresherrefresh="onRefresh" :refresher-triggered="isTriggered">
    </scroll-view> -->
    <view class="mid-hav">
        <view class="" v-for="(it, index) in InderSname" :key="index">
            <view class="content1">
                <view class="hav1">
                    <navigator url="/pages/namelist/namelist" open-type="navigate" hover-class="navigator-hover"
                        class="img-path">
                        <view class="imag">
                            <image :src="it.imageurl" mode="scaleToFill" class="image1" />
                        </view>
                        <view class="hu">
                            <text class="name">{{ it.name }}</text>
                            <view class="it">
                                {{ it.times }}&nbsp;.{{ it.ip }}
                            </view>
                        </view>
                    </navigator>
                    <view class="cz">
                        <!-- <view class="button" @click="toggleFollow">关注</view> -->
                        <u-button :type="buttonType" @click="toggleFollow" class="button">
                            {{ followText }}
                        </u-button>
                    </view>
                </view>
                <view class="tag">
                    <text class="tag1">{{ it.tang1 }}</text>
                    <text class="tag2">{{ it.tang1_s }}</text>
                </view>

                <view class="ims">
                    <view v-for="(image, index) in it.images " :key="index">
                        <image :src="image" mode="scaleToFill" class="ims2" />
                    </view>
                </view>
                <view class="fen"></view>
                <view class="ove">
                    <view class="ove1">
                        <image :src="it.imageURL[0]" mode="scaleToFill" class="ove3" />
                        <view class="ove4">{{ it.fen_s }}</view>
                        <image :src="it.imageURL[1]" mode="scaleToFill" class="ove3" @click="showPing = true" />
                        <view class="ove4">{{ it.title_s }}</view>
                        <image :src="it.imageURL[2]" mode="scaleToFill" class="ove3" />
                        <view class="ove4">{{ it.title1_s }}</view>
                        <image :src="it.imageURL[3]" mode="scaleToFill" class="ove3" />
                        <view class="ove4">{{ it.title2_s }}</view>
                    </view>
                    <view class="over" @click="showModal = true">
                        <image src="/static/images/icon_more-vertical_default.png" mode="scaleToFill" class="over1" />
                    </view>
                </view>
            </view>
        </view>
    </view>
    <view class="botto-box"></view>
    <!-- 更多 -->
    <BottomModal :visible="showModal" @update:visible="showModal = $event">
        <!-- 在这里放置你想在模态窗口中显示的内容 -->
        <view class="geng">
            <text class="tops-box">更多</text>
            <view class="mids-box">
                <view class="lefs-box">
                    <image src="/static/images/icon_sixin_default.png" mode="scaleToFill" class="lefs-img" />
                    <text class="lefs-title">私信</text>
                </view>
                <view class="mods-box">
                    <image src="/static/images/icon_buganxingqu_default.png" mode="scaleToFill" class="mods-img" />
                    <text class="mods-title">不能感兴趣</text>
                </view>
                <view class="regs-box"></view>
            </view>
            <view class="bots-box">
                <image src="/static/images/编组.png" mode="scaleToFill" class="bots-box" />
            </view>
        </view>
    </BottomModal>
    <!-- 评论 -->
    <Pinglun :visible="showPing" @update:visible="showPing = $event">
    </Pinglun>

</template>
<style lang="scss">
.mid-hav {
    display: flex;
    margin: 0 64rpx;
    height: 1388rpx;
    height: 100%;
    flex-direction: column;

    .content1 {
        display: flex;
        margin-top: 20rpx;
        background: #f0f0f0;
        margin-bottom: 20rpx;
        height: 472rpx;
        border-radius: 20rpx;
        box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(0, 0, 0, 0.25);
        flex-direction: column;

        .hav1 {
            display: flex;
            margin-top: 48rpx;
            width: 100%;
            height: 76rpx;

            .img-path {
                display: flex;
            }

            .imag {
                display: flex;
                margin-left: 56rpx;
                width: 76rpx;
                height: 76rpx;

                .image1 {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    /* 保持图片比例并填充整个区域 */
                    border-radius: 50%;
                    /* 让图片呈现圆形 */
                }
            }

            .hu {
                display: flex;
                margin-top: 3rpx;
                width: 144rpx;
                height: 100%;
                flex-direction: column;

                .name {
                    display: flex;
                    width: 130rpx;
                    height: 30rpx;
                    justify-content: center;
                    align-items: center;
                    font-size: 24rpx;
                    font-family: PingFang SC, PingFang SC-500;
                    font-weight: 500;
                    text-align: CENTER;
                    color: #000000;
                    line-height: 28rpx;
                    text-shadow: 0rpx 8rpx 8rpx 0rpx rgba(0, 0, 0, 0.25);
                }
            }

            .it {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 142rpx;
                height: 30rpx;
                font-size: 20rpx;
                font-family: PingFang SC, PingFang SC-500;
                font-weight: 500;
                color: #c0bfbf;
                text-align: CENTER;
                line-height: 24rpx;
                text-shadow: 0rpx 8rpx 8rpx 0rpx rgba(0, 0, 0, 0.25);
            }

            .cz {
                display: flex;
                margin-left: 200rpx;
                width: 100rpx;
                height: 40rpx;
                justify-content: center;
                background: #f2bb16;
                border-radius: 20rpx;
                box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(0, 0, 0, 0.25);

                .button {
                    display: flex;
                    margin-top: 3rpx;
                    margin-bottom: 4rpx;
                    width: 80rpx;
                    height: 36rpx;
                    justify-content: center;
                    align-items: center;
                    font-size: 24rpx;
                    font-family: PingFang SC, PingFang SC-500;
                    font-weight: 500;
                    text-align: CENTER;
                    color: #ffffff;
                    line-height: 28rpx;
                }

            }
        }

        .tag {
            display: flex;
            flex-direction: row;
            margin-left: 58rpx;
            margin-top: 32rpx;
            width: 384rpx;
            height: 38rpx;

            .tag1 {
                display: flex;
                width: 180rpx;
                height: 38rpx;
                font-size: 24rpx;
                font-family: PingFang SC, PingFang SC-500;
                font-weight: 500;
                text-align: center;
                color: #f2bb16;
                line-height: 28rpx;
                text-shadow: 0rpx 8rpx 8rpx 0rpx rgba(0, 0, 0, 0.25);

            }

            .tag2 {
                display: flex;
                width: 204rpx;
                height: 38rpx;
                font-size: 24rpx;
                font-family: PingFang SC, PingFang SC-500;
                font-weight: 500;
                text-align: center;
                color: #000000;
                line-height: 28rpx;
                text-shadow: 0rpx 8rpx 8rpx 0rpx rgba(0, 0, 0, 0.25);
            }

        }

        .ims {
            display: flex;
            margin-top: 20rpx;
            margin: 0 66rpx;
            height: 120rpx;

            .ims2 {
                display: flex;
                width: 132rpx;
                height: 120rpx;
                margin-right: 51rpx;
                background: #ffffff;
                border-radius: 20rpx;
                box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(0, 0, 0, 0.25), 0rpx 8rpx 8rpx 0rpx rgba(0, 0, 0, 0.25);
            }


        }

        .fen {
            display: flex;
            width: 180rpx;
            height: 36rpx;
            margin-top: 26rpx;
            margin-left: 66rpx;
            background: #d9d9d9;
            border-radius: 30rpx;
            box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(0, 0, 0, 0.25);
        }

        .ove {
            display: flex;
            margin-left: 58rpx;
            margin-top: 20rpx;
            flex-direction: row;
            width: 528rpx;
            height: 48rpx;

            .ove1 {
                display: flex;
                width: 430rpx;
                height: 48rpx;

                .ove2 {
                    display: flex;
                    width: 110rpx;
                    height: 48rpx;

                    &:last-child {
                        margin-right: 0;
                    }
                }

                .ove3 {
                    display: flex;
                    width: 48rpx;
                    height: 48rpx;
                }

                .ove4 {
                    display: flex;
                    width: 60rpx;
                    height: 48rpx;
                    justify-content: center;
                    align-items: center;
                    font-size: 24rpx;
                    font-family: PingFang SC, PingFang SC-500;
                    font-weight: 500;
                    text-align: CENTER;
                    color: #545050;
                    line-height: 28rpx;
                    text-shadow: 0rpx 8rpx 8rpx 0rpx rgba(0, 0, 0, 0.25);

                }

            }

            .over {
                display: flex;
                width: 148rpx;
                height: 48rpx;
                justify-content: center;
                /* 水平居中 */
                align-items: center;
                /* 垂直居中 */

                .over1 {
                    display: flex;
                    width: 32rpx;
                    height: 32rpx;
                    margin-left: 30rpx;
                }
            }
        }
    }
}

.botto-box {
    display: flex;
    height: 50rpx;
    width: 100%;
}

.geng {
    display: flex;
    width: 750rpx;
    height: 282rpx;
    border-top-left-radius: 40rpx;
    border-top-right-radius: 40rpx;
    flex-direction: column;

    .tops-box {
        display: flex;
        height: 84rpx;
        justify-content: center;
        align-items: center;
        font-size: 40rpx;
        font-family: Inter, Inter-700;
        font-weight: 700;
        text-align: center;
        color: #000000;
        line-height: 38rpx;
    }

    .mids-box {
        display: flex;
        height: 130rpx;
        flex-direction: row;

        .lefs-box {
            display: flex;
            height: 100rpx;
            width: 70rpx;
            margin-top: 20rpx;
            margin-left: 140rpx;
            flex-direction: column;

            .lefs-img {
                display: flex;
                margin-top: 10rpx;
                height: 60rpx;
                width: 60rpx;
            }

            .lefs-title {
                font-size: 24rpx;
                font-family: Inter, Inter-500;
                font-weight: 500;
                text-align: center;
                color: #000000;
                line-height: 28rpx;
            }

        }

        .mods-box {
            display: flex;
            height: 100rpx;
            width: 130rpx;
            margin-top: 20rpx;
            margin-left: 120rpx;
            flex-direction: column;

            .mods-img {
                display: flex;
                margin-top: 10rpx;
                height: 60rpx;
                width: 60rpx;
                margin-left: 30rpx;
            }

            .mods-title {
                font-size: 24rpx;
                font-family: Inter, Inter-500;
                font-weight: 500;
                text-align: LEFT;
                color: #000000;
                line-height: 28rpx;
            }
        }

        .regs-box {
            display: flex;
            height: 100rpx;
            width: 70rpx;
            background: #0ba4d7;
            margin-top: 20rpx;
            margin-left: 120rpx;

            .regs-img {
                display: flex;
                margin-top: 10rpx;
                height: 60rpx;
                width: 60rpx;
            }

            .regs-title {
                font-size: 24rpx;
                font-family: Inter, Inter-500;
                font-weight: 500;
                text-align: LEFT;
                color: #000000;
                line-height: 28rpx;
            }
        }
    }

    .bots-box {
        display: flex;
        background: #ffffff;
        height: 70rpx;
        width: 100%;
    }

}

.oin-box {
    width: 750rpx;
    height: 1218rpx;
    background: #fffdfd;
    border-radius: 40rpx 40rpx 0rpx 0rpx;
}
</style>